<template>
  <div>
    <el-button @click="test111">初始化页面</el-button>
    <div v-html="htmlMessage">
    </div>
    <div>
      <el-steps direction="vertical" space="40px" :active="state.setup">
        <el-step v-for="(item, index) in state.setup" :key="index">
          <template #title>
            <el-tag>{{ item }}</el-tag>
          </template>
        </el-step>
      </el-steps>
    </div>
  </div>
</template>

<script setup>

import {onMounted, reactive, ref, watch} from "vue";
import api from "@/utils/api.js";


const props = defineProps({
  url: {
    type: String,
    default: ''
  }
})

const state = reactive({
  setup: 1
})

const test111 = () => {
  state.setup++;
}

const htmlMessage = ref('')

const getHtmlMessage = () => {
  api.staticApi.getHtmlMessage(props.url).then(res => {
    htmlMessage.value = res
    console.log(res)
  })
}

watch(() => props.url, () => {
  if (props.url) {
    getHtmlMessage();
  }
})

onMounted(() => {
  if (props.url) {
    getHtmlMessage()
  }
})


</script>


<style scoped>

</style>